<template>
	<view class="container">
		<view class="Rects">
			<view class="littleRect" style="background: rgba(223, 229, 230, 1)"></view>
			<view class="littleRect" style="background: rgba(20, 178, 181, 1)"></view>
		</view>
		
		<view class="message-box">
			<view class="message-box-text">设置密码</view>
			<image class="message-box-image" src="../../static/lock.png"></image>
			<view class="message-box-item">
				<input class="message-box-input" type="text" name="password" minlength="8" :disabled="openSelect"
				 maxlength="16"  password="true" placeholder="字母、数字或符号，8-16位" v-model="inputPassword"
				 placeholder-class="holder-color" @input="WhenInputIP"/>
			</view>
			<view class="message-box-text">确定密码</view>
			<image class="message-box-image" src="../../static/lock.png"></image>
			<view class="message-box-item">
				<input class="message-box-input" type="text" name="password" minlength="8" :disabled="openSelect"
				 maxlength="16" password="true" placeholder="字母、数字或符号，8-16位"  v-model="confirmPassword" 
				 placeholder-class="holder-color" @input="WhenInputCP"/>
			</view>
		</view>
		
		<view class="toggle-box">
			<checkbox class="toggle-item" :disabled="openSelect" :checked="agree" @click="ChangeAgree"></checkbox>
			<view class="toggle-text">已阅读并同意
			<view class="green-text">《服务条款》</view>与
			<view class="green-text">《隐私权政策》</view>。</view>
		</view>
	
		<view style="margin-top: 300px;"></view>
		<button class="nextstep-btn" :style="{'background-color' : 
		openNextBtn ? 'rgba(20, 178, 181, 1)' : '#DFE5E6'}" @click="NextStepBtnEvent">下一步</button>
	
		<view class="mask" v-if="openSelect">
			<view class="identity-box">
				<image class="identity-box-image" src="../../static/background.png"></image>
				<view class="identity-box-text">注册成功！</view>
				<button class="identity-box-btn">我是家属</button>
				<button class="identity-box-btn">我是老人</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputPassword:'',//输入密码
				confirmPassword:'',//确认密码
				openNextBtn:false,//是否开启下一个按钮
				openSelect:false,//是否开启身份选择界面
				agree: false,//是否同意了条款
			};
		},
		methods: {
			//填写密码时触发的函数
			WhenInputIP(e) {
				const o = e.target;
				const inputRule = /[^\d^a-zA-Z!@#$%^&*_]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.inputPassword = o.value.replace(inputRule , '');
				})
				this.openNextBtn = this.NextStepJudge();
			},
			//填写确认时触发的函数
			WhenInputCP(e) {
				const o = e.target;
				const inputRule = /[^\d^a-zA-Z!@#$%^&*_]/g  //修改inputRule 的值
				this.$nextTick(function() {
					this.confirmPassword = o.value.replace(inputRule , '');
				})
				this.openNextBtn = this.NextStepJudge();
			},
			//下一步 按钮是否激活
			NextStepJudge(){
				if(this.inputPassword.length >= 8 && this.confirmPassword.length >= 8)
				  return true;
				return false;
			},
			//被激活之后的按钮触发事件
			NextStepBtnEvent(){
				if(this.openNextBtn){
					if(this.inputPassword === this.confirmPassword){
						console.log("验证成功！即将为你打开新世界的大门！");
						this.openSelect = true;
					}else if(!this.agree){
						return uni.$showMsg('请先同意并勾选《服务条款》与《隐私权政策》');
					}
					else{
						return uni.$showMsg("输入密码和确认密码不一致！");
					}
				}
			},
			//修改是否同意条款选项
			ChangeAgree(){
				this.agree = !this.agree;
			}
		}
	}
</script>

<style lang="scss">
.container {
	align-items: center;
	//background-color: rgba(250, 252, 251, 1);
	
	.Rects{
		margin-left: 40%;
		margin-top: 14px;
		display: flex;
		
		.littleRect{
			width: 32px;
			height: 4px;
			opacity: 1;
			border-radius: 4px;
			margin-left: 5px;
		}
	}
	
	.message-box {
		margin-top: 20px;
		margin-left: 20px;
		
		.message-box-text {
			font-size: 12px;
			padding-top: 14px;
			padding-bottom: 3px;
		}
		
		.message-box-image {
			position:absolute;
			width:20px;
			height:20px;
			margin-top: 23px;
			margin-left: 11px;
		}
		
		.message-box-item {
			margin-top: 5px;
			width: 94%;
			height: 50px;
			border-radius: 5px;
			border: 2px solid #dddddd;
			background-color: white;
			
			.message-box-input {
				margin-top: 13px;
				margin-left: 40px;
				font-size: 16px;
			}
			
		}
	}
	
	.toggle-box {
		margin-top: 14px;
		margin-left: 14px;
		display: flex;
		
		.toggle-item {
			transform: scale(0.5)
			
		}
		
		uni-checkbox .uni-checkbox-input,
		checkbox .wx-checkbox-input {
			border : 4px solid rgba(196, 196, 196, 1);
		}
		
		.toggle-text {
			margin-top: 5px;
			margin-left : -5px;
			font-size: 10px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 18px;
			color: rgba(34, 38, 37, 1);
			display: flex;
			
			.green-text{
				color: rgba(20, 178, 181, 1);
			}
		}
	}
	
	.nextstep-btn {
		width: 90%;
		height: 50px;
		color: white;
		border-radius: 8px;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0px 16px 0px 16px;
		font-size: 14px;
		color: white;
	}
	
	.mask {
		position: absolute;
		margin-top: -600px;
		z-index: 2;

		.identity-box{
			position: absolute;
			margin-top: 200px;
			margin-left: 80px;
			width: 200px;
			height: 220px;
			transform: scale(1.2);
			
			border: 1px solid rgba(0,0,0,0);
			align-items: center;
			justify-items: center;
			border-radius: 40px;
			
			.identity-box-image {
				position: absolute;
				border-radius: 40px;
				width: 200px;
				height: 200px;
				z-index: -1;
			}
			
			.identity-box-text {
				margin-top: 20px;
				margin-left: 60px;
				margin-bottom: 30px;
				font-size: 17px;
				font-weight: 500;
				color: rgba(10, 168, 155, 1) ;
			}
			
			.identity-box-btn {
				margin-top: 15px;
				margin-left: 35px;
				width: 130px;
				height: 40px;
				border-radius: 35px;
				font-size: 14px;
				border: 1px solid rgba(10, 168, 155, 1);
				color: rgba(10, 168, 155, 1) ;
				background-color: rgba(0, 0, 0, 0);
			}
		}
	}
}

.holder-color {
	
	color: (223, 229, 230, 1) ;
}
</style>
